<template>
  <div class="pageContent">
    <div class="centerAll demo-ruleForm" :rules="rules">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="order.prescription_order_sn" placeholder="订单编号" clearable @clear="handleClear"
            style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item>
          <el-select v-model="order.drugstore_id" placeholder="请选择药房" clearable @clear="handleClear"
            style="width: 180px">
            <el-option v-for="item in drug_process" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-input v-model="order.name" placeholder="患者姓名、手机号、处方编号" clearable @clear="handleClear"
            style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item>
          <!--订单生成日期-->
          <el-date-picker v-model="order.start_time" type="daterange" range-separator="-" start-placeholder="下单起始时间"
            end-placeholder="下单结束时间" :size="size" clearable @clear="handleClear" />
        </el-form-item>
        <el-form-item>
          <!--订单生成日期！！！！默认显示3个月-->
          <el-date-picker v-model="order.pay_start_time" type="daterange" range-separator="-" start-placeholder="支付起始时间"
            end-placeholder="支付结束时间" :size="size" clearable @clear="handleClear" />
        </el-form-item>



        <el-form-item>
          <!--药态-->
          <el-select v-model="order.drug_process_id" placeholder="药态" clearable @clear="handleClear"
            style="width: 180px">
            <el-option v-for="item in drug_process" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <!--药态-->
          <el-select v-model="order.order_status" placeholder="订单状态" clearable @clear="handleClear"
            style="width: 180px">
            <el-option v-for="item in drug_process" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <!--药态-->
          <el-select v-model="order.lock_status" placeholder="锁方状态" clearable @clear="handleClear" style="width: 180px">
            <el-option v-for="item in drug_process" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <!--药态-->
          <el-select v-model="order.cook" placeholder="加工方式" clearable @clear="handleClear" style="width: 180px">
            <el-option v-for="item in drug_process" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <!--订单生成日期-->
          <el-date-picker v-model="order.lock_start_time" type="daterange" range-separator="-"
            start-placeholder="锁方起始始时间" end-placeholder="锁方结束时间" :size="size" clearable @clear="handleClear" />
        </el-form-item>


      </el-form>



      <div class="centerButton">
        <div>
          <el-button type="primary" @click="getList">筛选</el-button>
          <el-button @click="resetForm(queryFormRef)">重置</el-button>
        </div>
      </div>

      <el-table :key="key" :data="dataList" id="table" v-loading="loading">
        <el-table-column label="处方编号" :fixed="true" align="center" width="160">
          <template #default="scope">
            {{ scope.row.order_sn }}
          </template>
        </el-table-column>
        <el-table-column align="center" v-for="(item, index) in formHead" :key="index" :label="item.label"
          :prop="item.prop" :width="item.width">
          <template #default="scope" v-if="item.prop == 'lock_status'">
            {{scope.row[item.prop] == 1?'锁定':'无锁'}}
          </template>
          <template #default="scope" v-else>
            {{scope.row[item.prop]}}
          </template>

        </el-table-column>
        <el-table-column label="操作" align="center" width="270px" fixed="right">
          <template #default="scope">
            <el-button size="mini" type="text" @click="openDetail(scope.row.prescription_order_id)">审核</el-button>
            <el-button size="mini" type="text" @click="openDetail(scope.row.prescription_order_id)">锁方</el-button>
            <el-button size="mini" type="text" @click="openDetail(scope.row.prescription_order_id)">查看详情</el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
          :small="pageConfig.small" :disabled="pageConfig.disabled" :background="pageConfig.background"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogTableVisible" title="审核处方" width="1000px">
    <el-form :inline="true" :model="formInline" class="demo-form-inline dialogStyle" :label-position="labelPosition">
      <el-form-item label="处方单号:">
        <el-text>11</el-text>
      </el-form-item>
      <el-form-item label="处方编号:">
        <el-text>11</el-text>
      </el-form-item>
      <el-form-item label="支付状态:">
        <el-text>11</el-text>
      </el-form-item>

      <el-form-item label="患者姓名:">
        <el-text>11</el-text>
      </el-form-item>
      <el-form-item label="开发日期:">
        <el-text>11</el-text>
      </el-form-item>
      <div>
        <el-form-item label="患者性别:">
          <el-text>11</el-text>
        </el-form-item>
        <el-form-item label="患者年龄:">
          <el-text>11</el-text>
        </el-form-item>
        <el-form-item label="身份证号:">
          <el-text>11</el-text>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="加工方式:">
          <el-text>11</el-text>
        </el-form-item>
        <el-form-item label="就诊科室:">
          <el-text>11</el-text>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="开方药房:">
          <el-text>11</el-text>
        </el-form-item>
        <el-form-item label="药态:">
          <el-text>11</el-text>
        </el-form-item>
      </div>

      <div style="margin:40px 0px 20px 0px">
        <el-form-item label="临床诊断:">
          <el-text>11</el-text>
        </el-form-item>
      </div>

      <el-form-item label="处方明细:" class="col">
      </el-form-item>
      <div>
        <el-form-item label="  " class="detailList" style="width: 100% !important;">
          <el-text>11</el-text>
          <el-text>11</el-text>
          <el-text>11</el-text>
          <el-text>11</el-text>
          <el-text>11</el-text>
        </el-form-item>
      </div>

      <div class="col">
        <el-form-item label="内服:">
          <el-text class="detailList textColor"
            style="width: 100% !important;color:rgba(19, 19, 19, 0.8) !important;">共14剂，每日1剂，没剂分2次</el-text>
        </el-form-item>
      </div>
      <div class="col">
        <el-form-item label="医嘱:">
          <el-text class="detailList textColor"
            style="width: 100% !important;color:rgba(19, 19, 19, 0.8) !important;">忌嘴</el-text>
        </el-form-item>
      </div>
      <div class="col">
        <el-form-item label="备注:">
          <el-text class="detailList textColor"
            style="width: 100% !important;color:rgba(19, 19, 19, 0.8) !important;">该患者为慢性病患者</el-text>
        </el-form-item>
      </div>
      <div class="col">
        <el-form-item label="医生签名(盖章):">
          <img src="../../../icons/酷.svg">
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">驳回</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          锁方
        </el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          通过
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- <el-dialog v-model="dialogTableVisible" title="信息提交" width="1000">
      <el-form :model="formInline" class="demo-form-inline " :label-position="labelPosition"  >
        <el-form-item label="用药方式:">
          
        </el-form-item>
        <el-form-item label="服药禁忌:">
          <el-select><el-option></el-option></el-select>
        </el-form-item>
        <el-form-item label="服药时间:">
          <el-select><el-option></el-option></el-select>
        </el-form-item>
        <el-form-item label="补充说明:">
          <el-input type="textarea"></el-input>
        </el-form-item>
      </el-form>
  </el-dialog> -->
</template>

<script setup>
  // import Table from '/src/components/Table/index.vue'
  // import Form from '/src/components/Form/index.vue'
  import {
    list
  } from '/src/api/pharmacyBackstage/pharmacist'
  import {
    ref,
    nextTick,
    onMounted,
    reactive,
    unref,
    watch
  } from 'vue'
  import {
    useRoute,
    useRouter
  } from "vue-router";
  import {
    ArrowDown,
    Check,
    CircleCheck,
    CirclePlus,
    CirclePlusFilled,
    Plus
  } from '@element-plus/icons-vue'
  const router = useRouter()
  const route = useRoute()
  const queryFormRef = ref()
  const order = ref({})
  const selectTime = ref(null)
  const selectTimePay = ref(null)
  const tableSelectVisible = ref(false);
  const dataList = ref();
  const key = ref(1);
  const labelPosition = ref('right')
  //分页面
  const total = ref(0)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const pageConfig = {
    small: false,
    disabled: false,
    background: false,
  }
  const loading = ref(false)
  const totalList = ref({})

  //动态table数组
  const formTheadOptions = ref([{
    label: '患者',
    prop: 'patient_name',
    width: ''
  }, {
    label: '地址',
    prop: 'address',
    width: '200px'
  }, {
    label: '发货方式',
    prop: 'send_method_text'
  }, {
    label: '快递单号',
    prop: 'express_sn',
    width: "160px"
  }, {
    label: '订单状态',
    prop: 'order_status_text',
    width: ""
  }, {
    label: '药态',
    prop: 'process_name'
  }, {
    label: '加工方式',
    prop: 'cook',
    width: ""
  }, {
    label: '手机号',
    prop: 'patient_mobile',
    width: '160px'
  }, {
    label: '订单支付时间',
    prop: 'pay_time',
    width: "160px"
  }, {
    label: '订单时间',
    prop: 'created_at',
    width: "160px"
  }, {
    label: '药品类型',
    prop: 'drug_type_id'
  }, {
    label: '药房名称',
    prop: 'drugstore_name',
    width: "160px"
  }, {
    label: '订单编号',
    prop: 'order_sn',
    width: "160px"
  }, {
    label: '锁方状态',
    prop: 'lock_status'
  }, {
    label: '锁方时间',
    prop: 'lock_end_time	',
    width: "160px"
  }, {
    label: '锁方原因',
    prop: 'lock_remark',
    width: "160px"
  }]);
  //动态table
  const defaultFormThead = [{
    ...formTheadOptions
  }];
  const defaultCheckedValue = formTheadOptions.value.map(item => item.prop)
  const checkboxVal = ref(formTheadOptions.value.map(item => item.prop));

  //检索数组
  const inputTheadOptions = ref([{
    label: '订单编号',
    prop: 'prescription_order_sn',
  }, {
    label: '药房',
    prop: 'drugstore_id',
  }, {
    label: '患者姓名 手机号 处方编号',
    prop: 'name'
  }, {
    label: '下单时间',
    prop: 'start_time',
  }, {
    label: '支付时间',
    prop: 'order_sn'
  }, {
    label: ' 药态',
    prop: 'drug_process'
  }, {
    label: '订单状态',
    prop: 'order_status'
  }, {
    label: '锁方状态',
    prop: 'create_start_time'
  }, {
    label: ' 加工方式',
    prop: 'pay_start_time',
    width: ''
  }, {
    label: '锁方状态',
    prop: 'is_confirm',
    width: ''
  }, {
    label: ' 锁方时间',
    prop: 'pay_status'
  }])

  //列表接口
  const getList = async () => {
    try {
      loading.value = true
      const options = {
        ...order.value
      }
      options.current_page = currentPage.value;
      options.per_page = pageSize.value;
      const result = await list({
        ...options
      })
      console.log('处方订单列表', result)
      if (result.code == 200) {
        dataList.value = result.data.data
        total.value = result.data.total_number
        totalList.value = result.data
        loading.value = false
      }
    } catch (error) {
      console.error('获取列表时出错：', error)
    }
  }
  const order_status = ref([]) //订单状态
  const pay_status = ref([]) //支付状态
  const is_fast = ref([]) //开方方式
  const is_confirm = ref([]) //审核状态
  const is_third = ref([]) //三方推送状态
  const prescription_order_side = ref([]) //平台信息
  const drug_store = ref([]) //药房信息
  const drug_process = ref([]) //药态
  const lock_status = ref([{
    id: 1,
    value: "已锁方"
  }, {
    id: 2,
    value: "未锁方"
  }])
  const mechanism_list = ref([]) //属地
  //枚举接口enums
  const getEnums = async () => {
    try {
      const result = await enums()
      console.log('枚举', result)
      if (result.code == 200) {
        console.log('枚举', result.data)
        order_status.value = result.data.order_status
        pay_status.value = result.data.pay_status
        is_fast.value = result.data.is_fast
        is_confirm.value = result.data.is_confirm
        is_third.value = result.data.is_third
        prescription_order_side.value = result.data.prescription_order_side
        drug_store.value = result.data.drug_store
        drug_process.value = result.data.drug_process
      }
    } catch (error) {
      console.error('获取列表时出错：', error)
    }
  }
  /*属地列表*/
  const getMechanism = async () => {
    try {
      const result = await mechanism()
      console.log('枚举', result)
      if (result.code == 200) {
        console.log('属地', result.data)
        mechanism_list.value = result.data
      }
    } catch (error) {
      console.error('获取列表时出错：', error)
    }
  }
  //重置
  const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    // 清空order对象中的所有属性值
    for (const key in order.value) {
      order.value[key] = '';
    }
    getList();
  };

  const resetFormParent = () => {
    resetForm(queryFormRef.value)
  }
  //清除input框时候调用
  const handleClear = () => {
    getList()
    console.log('清除事件被触发！');
  };
  const checkboxValInput = ref(inputTheadOptions.value.map(item => item.prop))
  const changeCheck = (e) => {
    console.log('变化', e)
    for (const key in order.value) {
      if (!checkboxValInput.value.includes(key)) {
        // 如果不在checkboxValInput中，则清空对应的属性值
        order.value[key] = '';
      }
    }
  }

  const formHead = ref(defaultFormThead);
  //分页
  const handleSizeChange = (val) => {
    pageSize.value = val;
    getList();
  }
  const handleCurrentChange = (val) => {
    currentPage.value = val;
    getList();
  }
  onMounted(() => {
    checkboxVal.value = defaultCheckedValue;
    getList()
    // getEnums()
    // getMechanism()
  });

  const dialogTableVisible = ref(false)
  const openDetail = (id) => {
    dialogTableVisible.value = true
  }

  watch(checkboxVal, (valArr) => {
    formHead.value = formTheadOptions.value.filter((item) => valArr.includes(item.prop));
    key.value += 1;
    localStorage.setItem("tableHead", JSON.stringify(formHead.value));
  });

  const formInline = reactive({
    user: '',
    region: '',
    date: '',
  })
</script>

<style lang="scss" scoped>
  ::v-deep .el-table {
    color: #515a6e;
    font-weight: 400;
    font-size: 14px !important;
  }

  ::v-deep thead tr th .cell {
    color: #515a6e;
    font-weight: 500;

  }

  ::v-deep thead tr th {
    background: #fafafa !important;
  }

  ::v-deep tbody tr td {
    font-size: 13px !important;
  }

  ::v-deep .el-form-item {
    margin-left: 0 important !important;
  }

  ::v-deep .el-range-input::placeholder {
    color: #b6bcc4;
    font-size: 12px;
  }

  ::v-deep .el-form--inline .el-form-item {
    margin-right: 8px;
    // width: 200px;
  }

  ::v-deep .el-select__wrapper {
    // margin-right: 8px;
    width: 180px;
  }

  ::v-deep .el-range-editor.el-input__wrapper {
    width: 342px;
  }

  ::v-deep .el-dropdown-item {
    padding: 10px !important;
    width: 200px;
  }

  .row {
    display: flex;
    flex-direction: row;
  }

  .centerButton {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    text-align: left;
  }

  .centerButton div:last-child {
    margin-top: 10px
  }

  .checkBox {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    height: 300px;
    overflow-y: auto;
    line-height: 30px;
  }

  .checkBox ::v-deep .el-checkbox {
    padding: 6px 0;
    font-weight: 400;
  }

  .demo-pagination-block {
    margin: 20px 0;
    display: flex;
    justify-content: center;
  }

  .demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
  }

  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }

  .dialogStyle ::v-deep .el-form-item {
    width: 33.33% !important;
    margin: 4px 0px !important;
  }

  .dialogStyle ::v-deep .el-form-item__label {
    width: 140px !important;
    margin: 0px !important;
    font-weight: bold;
    color: rgba(19, 19, 19, 0.8);
    font-size: 14px;
  }

  .dialogStyle ::v-deep .el-text {
    width: 120px !important;
    margin: 0px !important;
    color: #b1b3b8 !important;
    font-size: 14px;
  }

  .detailList {
    width: 100%;
  }

  .detailList ::v-deep .el-form-item__label {
    width: 120px !important;
  }

  .detailList ::v-deep .el-form-item__content {
    border-bottom: 1px solid #e9e9eb;
  }

  .detailList ::v-deep .el-text {
    width: 25% !important;
    margin-bottom: 10px !important;
  }
</style>